<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能教育系统</title>
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- CSS文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/system.css">
    <link rel="stylesheet" href="css/knowledge-base.css">
</head>
<body>
    <!-- 登录页面 -->
    <div class="login-container" id="loginPage">
        <div class="login-left">
            <h1>智能教育系统</h1>
            <p>智能教育系统是一款基于人工智能技术的个性化学习辅助平台，通过智能算法分析学员的学习状态和知识掌握程度，为每位学员量身定制专属的学习路径和练习内容。</p>
            <div style="margin-top: 30px; display: flex; gap: 15px;">
                <div style="text-align: center;">
                    <div style="font-size: 2.5rem; margin-bottom: 10px;">🎯</div>
                    <div style="font-size: 0.9rem;">个性化学习路径</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 2.5rem; margin-bottom: 10px;">📊</div>
                    <div style="font-size: 0.9rem;">智能学习分析</div>
                </div>
            </div>
        </div>
        <div class="login-right">
            <form class="login-form" id="loginForm">
                <h2>用户登录</h2>
                <div class="form-group">
                    <label for="username">账号</label>
                    <input type="text" id="username" class="form-control" placeholder="请输入账号" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
                </div>
                <div class="form-group">
                    <label for="role">登录角色</label>
                    <select id="role" class="form-control" required>
                        <option value="">请选择角色</option>
                        <option value="admin">管理员</option>
                        <option value="teacher">教师</option>
                        <option value="student">学员</option>
                    </select>
                </div>
                
                <!-- 验证码 -->
                <div class="form-group">
                    <label for="captcha">验证码</label>
                    <div class="captcha-container">
                        <input type="text" id="captcha" class="form-control captcha-input" placeholder="请输入验证码" required>
                        <div id="captcha-image" class="captcha-image">1+5=</div>
                    </div>
                </div>
                
                <!-- 记住我 -->
                <div class="remember-me">
                    <input type="checkbox" id="rememberMe" checked>
                    <label for="rememberMe">记住我</label>
                </div>
                <button type="submit" class="btn-login">登录系统</button>
            </form>
        </div>
    </div>
    
    <!-- 系统管理界面 -->
    <div class="system-container" id="systemPage">
        <div class="container">
            <!-- 左侧菜单栏 -->
            <div class="sidebar">
                <div class="admin-info">
                    <h3><i class="fas fa-user-circle"></i> 管理员 admin</h3>
                </div>
                

                <ul class="menu">
                    <li class="menu-item active" data-target="home">
                        <i class="fas fa-home"></i> 首页
                    </li>

                    <li class="menu-item" data-target="knowledge-management">
                        <i class="fas fa-book"></i> 知识管理
                        <i class="fas fa-chevron-right toggle-icon"></i>
                    </li>
                    <div class="submenu" id="knowledge-management-submenu">
                        <div class="submenu-item" data-tab="resource-library"><i class="fas fa-book"></i> 资源库</div>
                        <div class="submenu-item" data-tab="topic-management"><i class="fas fa-tags"></i> 专题管理</div>
                        <div class="submenu-item" data-tab="tag-management"><i class="fas fa-tag"></i> 标签管理</div>
                    </div>

                    <li class="menu-item" data-target="system-config">
                        <i class="fas fa-cogs"></i> 系统基础配置
                        <i class="fas fa-chevron-right toggle-icon"></i>
                    </li>
                    <div class="submenu" id="system-config-submenu">
                        <div class="submenu-item" data-tab="user-management"><i class="fas fa-user"></i> 用户账号管理</div>
                        <div class="submenu-item" data-tab="user-role"><i class="fas fa-user-tag"></i> 用户角色管理</div>
                        <div class="submenu-item" data-tab="org-structure"><i class="fas fa-sitemap"></i> 组织架构管理</div>
                        <div class="submenu-item" data-tab="permission-system"><i class="fas fa-key"></i> 权限体系配置</div>
                        <div class="submenu-item" data-tab="system-params"><i class="fas fa-sliders-h"></i> 系统参数设置</div>
                    </div>
                </ul>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content">
                <div class="content-header">
                    <h2>首页</h2>
                    <div class="user-actions">
                        <span class="user-info">欢迎，管理员</span>
                        <button class="btn-logout" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出</button>
                    </div>
                </div>

                <!-- 首页 -->
                <div class="tab-container active" id="home">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>

                <!-- 用户账号管理 -->
                <div class="tab-container" id="user-management">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
                
                <!-- 用户角色管理 -->
                <div class="tab-container" id="user-role">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
                
                <!-- 组织架构管理 -->
                <div class="tab-container" id="org-structure">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
                
                <!-- 权限体系配置 -->
                <div class="tab-container" id="permission-system">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
                
                <!-- 系统参数设置 -->
                <div class="tab-container" id="system-params">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>

                <!-- 资源库 -->
                <div class="tab-container" id="resource-library">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>

                <!-- 专题管理 -->
                <div class="tab-container" id="topic-management">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>

                <!-- 标签管理 -->
                <div class="tab-container" id="tag-management">
                    <!-- 内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="js/main.js"></script>
    <script src="js/login.js"></script>
    <script src="js/system.js"></script>
    <script src="js/user-management.js"></script>
    <script src="js/user-role.js"></script>
    <script src="js/org-structure.js"></script>
    <script src="js/permission-system.js"></script>
    <script src="js/system-params.js"></script>
    <script src="js/knowledge-base.js"></script>
</body>
</html>